<template>
    <parentchildtree-templatev1
        :treeData='treeData' 
        :buttonsChild='buttonsChild' 
        :childTableParams='childTableParams'
        :dialogData='dialogData'
        @treeNodeDelHandler='treeNodeDelHandler'
        @childDelHandler$before='childDelHandler$before'
        @childDelHandler$after='childDelHandler$after'
        >
        注释：主表操作列自定义
        <template #table_before_son></template>
        <template #table_after_son>
            <el-table-column align="center" label="操作" width="150" :resizable="false">
                <template slot-scope="scope">
                    <el-button class="edit-bgc" icon="el-icon-edit" @click="lookHandle(scope.row)">预览</el-button>
                </template>
            </el-table-column>
        </template>
        注释：子表格操作列自定义同理 childTable_before_son childTable_after_son
        注释：搜索/表单自定义格式同理 table_before_son
    </parentchildtree-templatev1>
</template>
<script>
import {queryApi, fileUpload, fileUploadvideo} from '@/api/api'
import parentchildtreeTemplatev1 from '@/components/parentChildtreeTemplate_v1'
export default {
    data() {
        const data = [
        {
            id: 1,
            label: "董事会(董事会)",
            children: [
            {
                id: 4,
                label: "总经办1",
                children: [
                {
                    id: 9,
                    label: "三级 1-1-1"
                },
                {
                    id: 10,
                    label: "三级 1-1-2"
                }
                ]
            }
            ]
        },
        {
            id: 2,
            label: "总经办2",
            children: [
            {
                id: 5,
                label: "二级 2-1"
            },
            {
                id: 6,
                label: "二级 2-2"
            }
            ]
        },
        {
            id: 3,
            label: "部门名称(部门层级名称)",
            children: [
            {
                id: 7,
                label: "业务部"
            },
            {
                id: 8,
                label: "市场部"
            }
            ]
        }
        ];
        return {

            treeData: JSON.parse(JSON.stringify(data)),
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            // data: JSON.parse(JSON.stringify(data)),
            //type 主表type:add save del   子表type:childAdd childSave childDel
            buttonsChild: {
                align: 'right',
                buttons:[
                    {type: 'childSave', content: '保存', status: 'primary', size:"mini"},
                    {type: 'childAdd', content: '新增', status: 'primary', size:"mini"},
                    {type: 'childDel', content: '删除', status: 'primary', size:"mini"}
                ]
            },
            //子表格数据
            childTableParams: {
                // 表格接口地址  详细地址在api配置
                // url:urlCommon.queryApi.url,
                isShowChild: true, //主子表子表中必填项  首次不加载为true
                apiName: queryApi,
                // 风格主题
                tooltip:"dark",
                // 表头数据
                columns:[
                    {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:""},
                    {prop: 'name', label: '姓名', align: 'center',type:"input",fixed:""},
                    {prop: 'date', label: '时间', align: 'center',type:"date",fixed:"",formatter:this.formatter},
                    {prop: 'address', label: '地址', align: 'center',type:"input",fixed:""},
                    {prop: 'created', label: '创建时间', align: 'center',type:"",fixed:""}
                ],
                //新增行数据初始化
                rowDataJson: {
                    date:"",name:"",address:""
                },
                // 表格数据
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
                ],
                // 分页
                pageSizeOpt: ['10','20','50','100','200'],
                pageNum:1,
                pageSize:10,
                // 表格高度最大值
                maxHeight:1000,
            },
            dialogData: {
                dialogVisible: false,
                formData: {
                    // isformData:
                    // 搜索元素渲染
                    searchRender: [
                        { field: 'deptName', label: '名称', type: '$input', placeholder: '请输入名称', span:24},
                        { field: 'deptCode', label: '编码', type: '$input', placeholder: '请输入编码', span:24},
                        { 
                            align: 'center',
                            span: 24, 
                            type: '$buttons',
                            children: [
                                //type按相应类别传入如下值 按规定传 
                                {type: 'cancel', content: '取消', status: '', size:"mini"},
                                {type: 'reset', content: '重置', status: '', size:"mini"},
                                {type: 'submit', content: '提交', status: 'primary', handler: 'searchFn', size:"mini"}
                            ] 
                        }
                    ],
                    // 搜索数据绑定
                    queryData: {
                        deptName: '',
                        deptCode: ''
                    },
                    rules: {
                        deptName: [
                            { required: true, message: '名称必填', trigger: 'blur' }
                        ],
                        deptCode: [
                            { required: true, message: '编码必填', trigger: 'blur' }
                        ]
                    }
                },
            }
        }
    },
    methods: {
        lookHandle(row) {
            console.log(row)
        },
        treeNodeDelHandler(data) {
            console.log(data)
        },
        //表格新增/删除/修改后的数据保存操作
        saveHandler(data) {
            // console.log(data)
            console.log("这里写保存的逻辑----保存成功")
        },
        delHandler$before(data) {
            console.log('这里写删除前的逻辑')
        },
        delHandler$after(data) {
            console.log('这里写删除后的逻辑')
        },
        childSaveHandler(data) {
            console.log("这里写子表保存的逻辑----保存成功")
        },
        childDelHandler$before(data) {
            console.log('这里写子表删除前的逻辑')
        },
        childDelHandler$after(data) {
            console.log('这里写子表删除后的逻辑')
        }
    },
    components: {
        parentchildtreeTemplatev1
    }
}
</script>
<style>

</style>


